<template>
  <div class="tree-layout">
    <div class="tree">
      <div class="refresh">
        <div @click="refreshClick"><span class="el-icon-refresh" :class="[rotating?'rotating':'']"> </span> 刷新</div>
      </div>
      <el-tree :props="props" :load="ansyTree" lazy :indent='16' node-key="id"
               :default-expanded-keys="['']"
               @node-click="getNodes"
               v-if="refresh">
                 <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :title="node.label">{{ node.label }}</span>
      </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    props: {
      hasContent: {
        type: Boolean,
        default: false
      },
      url: ""
    },
    data() {
      return {
        props: {
          label: "name",
          children: "zones",
          isLeaf: "isChild",
          id: "id",

        },
        refresh: true,
        rotating: true
      };
    },
    methods: {
      clickEvent() {
      },
      refreshClick() {
        this.refresh = false;
        setTimeout(() => {
          this.refresh = true;
        }, 100);
      },
      getNodes(data, node) {
        this.$emit('change', data, node);
      },
      ansyTree(node, resolve) {
        const data = [];
        //异步加载树形结构
        if (node.level === 0) {
          let init = {name: "根目录", id: '', isChild: false};
          data.push(init)
          return resolve(data);
        }
        if (node.level > 0) {
          this.rotating = true;
          axios.post(this.url, {id: node.data.id}).then(res => {
            this.rotating = false;
            let body = res.body;
            for (let i in body) {
              let obj = {};
              obj.id = body[i].id;
              obj.isChild = body[i].childCount > 0 ? false : true;
              obj.name = body[i].name;
              obj.data = body;
              data.push(obj);
            }
            console.log(data);
            return resolve(data);
          }).catch(error => {
            console.log(error);
            this.rotating = false;
          });
        }
      }
    }
  };
</script>

<style lang='scss' scoped>
  @keyframes rotating {
    from {
      transform: rotate(0)
    }
    to {
      transform: rotate(360deg)
    }
  }

  .rotating {
    animation: rotating 1.2s linear infinite
  }
</style>
